<template>
  <div>
    <input type="file" v-show="false" ref="upload" @change="onchange" accept="image/*">
    <div :class="['photo','id_card_photo','id_card_emblem','edu_photo','hukou_photo'].includes(type)?type:'diflt'" @click="onclick" style="cursor: pointer;"> 
      <img src="@/assets/sl.png" v-show="!imgurl" v-if="type=='photo'" alt="">
      <img src="@/assets/bm.png" v-show="!imgurl" v-else-if="type=='id_card_photo'" alt="">
      <img src="@/assets/zm.png" v-show="!imgurl" v-else-if="type=='id_card_emblem'" alt="">
      <img src="@/assets/byz.png" v-show="!imgurl" v-else-if="type=='edu_photo'" alt="">
      <img src="@/assets/hkb.png" v-show="!imgurl" v-else-if="type=='hukou_photo'" alt="">
      <img src="@/assets/moren.png" v-show="!imgurl" v-else alt="" >
      <img :src="imgurl" v-show="imgurl" class="img" alt="">
      <div class="remove" v-show="imgurl"  @click.stop="remove">
        ×
      </div>
      <div class="typeafter" v-if="!['photo','id_card_photo','id_card_emblem'].includes(type)">
        上传{{ label }}
      </div>
    </div>
    <!-- 图片裁剪 -->
    <simpleCrop
      :crop-params="cropParams"
      @crop="crop"
      @close="closeCrop"
      v-if="isShowImgCard"
      v-loading="showProBackLoading"
    ></simpleCrop>
    <div style="
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999999999999;
    background: #fff;
    opacity: 0.2;
    "
    v-show="CropLoading"
    v-loading="CropLoading"
    >

    </div>
    <!-- 更改图片背景色 -->
    <div class="cameraBox"
        v-show="showProBack"
        v-loading="showProBackLoading"
    >
        <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;height: 100%;flex-direction: column;">
        <p style="color: #f00;margin: 30px 0px; font-size: 16px;">更换背景色(点击下方按钮,更改对应背景颜色)</p>
        <div style="display: flex; flex-direction: column; align-items: center">
            <img :src="backPhoto" alt="" :style="`height: 350px; width:  250px`" />
            <div style="display: flex">
            <p
                style="
                margin: 10px 15px;
                background-color: #fff;
                height: 40px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0px 2px 6px 0 #aaa;
                cursor: pointer;
                "
                @click="checkBackGround('0')"
            ></p>
            <p
                style="
                margin: 10px 15px;
                background-color: blue;
                height: 40px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0px 2px 6px 0 #aaa;
                cursor: pointer;
                "
                @click="checkBackGround('1')"
            ></p>
            <p
                style="
                margin: 10px 15px;
                background-color: #f00;
                height: 40px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                box-shadow: 0px 2px 6px 0 #aaa;
                cursor: pointer;
                "
                @click="checkBackGround('2')"
            ></p>
            </div>
        </div>
        <div style="width:100%;height: 200px;line-height: 200px;text-align: center;">
            <el-button type="danger" @click="closeImgBack">关闭</el-button>
            <el-button type="primary" @click="commitImgBack">提交</el-button>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import simpleCrop from "simple-crop/index.vue";
import "simple-crop/template-2.css";
import upload from './upload'
import {mapGetters} from 'vuex';
export default {
  components:{
    simpleCrop
  },
  computed: {
    ...mapGetters(["init"]),
  },
  watch:{
    showProBack(val){
      if(val){
        document.getElementById('bodyFull').style.overflow = 'hidden'
      }else{
        document.getElementById('bodyFull').style.overflow = 'auto'
      }
    },
    isShowImgCard(val){
      if(val){
        document.getElementById('bodyFull').style.overflow = 'hidden'
      }else{
        if(!this.showProBack){
            document.getElementById('bodyFull').style.overflow = 'auto'
        }
      }
    },
  },
  props:{
    type:{
      type:String,
      default:'id_card_emblem',
    },
    tips:{
      type:String,
      default:'',
    },
    zip:{
      type:Boolean,
      default:false,
    },
    label:{
      type:String,
      default:'',
    },
    button:{
      type:Boolean,
      default:false,
    },
    corp:{
      type:Boolean,
      default:true,
    },
    value:{
      type:String,
      default:'',
    }
  },
  data () {
    return {
        imgurl:'',//require('../assets/logo.png')
        showCamera:false,
        cameraLoading:false,
        cropParams: {
            label:'',
            title: "点击关闭按钮可以跳过此编辑", //标题
            src: "", // 裁剪图片地址
            size: {
            // 裁剪尺寸
            width: 390,
            height: 567,
            },
            rotateSlider: true, //是否开启旋转刻度盘
            cropSizePercent: 0.65, //裁剪框显示比例
            borderWidth: 1, //裁剪框边框宽度
            funcBtns: ["close", "crop", "around", "reset"], //功能按钮配置
            borderColor: "#fff", //裁剪框边框颜色
            coverColor: "rgba(0,0,0,0.5)", //裁剪框遮罩颜色
            startAngle: -360, //旋转刻度盘开始角度
            endAngle: 360, //旋转刻度盘结束角度
        },
        isShowImgCard:false,//图片剪切模块
        showProBack:false,//图片背景色更改
        backPhoto:'',//需要修改背景色的图片
        showProBackLoading:false,//等待图片背景修改完成
        CropLoading:false,//等待裁剪完成
        }
    },
    methods:{
        ...upload.methods,
    },
}
</script>

<style lang="scss" scoped>
li{
  list-style: none;
}
.label{
  color: #333;
  font-size: 16px;
  margin-bottom: 12px;
}
.tips{
  color: #999;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.remove{
  font-size: 18px;
  position: absolute;
  z-index: 10;
  color: #fff;
  top: 5px;
  right: 5px;
  width: 30px;
  height: 30px;
  display: none;
  text-align: center;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #666;
}
.edu_photo,.hukou_photo,.diflt{
    &:hover{
        .remove{
            display: flex;
        }
    }
  height: 94px;
  width: 140px;
  border:1px solid #eee;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #999;
  .typeafter{
    color: #333;
    font-size: 10px;
    display: flex;
    position: absolute;
    width: 100%;
    height: 70%;
    align-items: center;
    justify-content: center;
    bottom: 0;
    z-index: 1;
  }
  img{
    width: 100%;
    height: 100%;
    background: #ECF4FF;
  }
  .img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    height: auto;
    background: #fff;
  }
}
.photo{
    &:hover{
        .remove{
            display: flex;
        }
    }
  height: 147px;
  width: 114px;
  border:1px solid #eee;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  &::after{
    content: '请上传免冠照';
    color: #fff;
    font-size: 10px;
    display: flex;
    position: absolute;
    width: 100%;
    height: 22px;
    background: rgba(22, 106, 255,0.7);
    align-items: center;
    justify-content: center;
    bottom: 0;
    z-index: 1;
  }
  img{
    width: 100%;
    height: 100%;
  }
  .img{
    position: relative;
    z-index: 2;
    background: #fff;
  }
}
.id_card_photo,.id_card_emblem{
    &:hover{
        .remove{
            display: flex;
        }
    }
  height: 152px;
  width: 157px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #999;
  img{
    width: 100%;
    height: 100%;
    background: #ECF4FF;
  }
  .img{
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    height: auto;
    background: #fff;
  }
}

.cameraBox{
  position: fixed;
  top: 0;
  width: 50vw;
  height: 87vh;
  left: 0;
  bottom: 0;
 right: 0;
 margin: auto;   
  background: #fff;
  z-index: 10000;
}
.btns{
  position: absolute;
  height: 8vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  bottom: 2vh;
  ul{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 0;
    li{
      height: 8vh;
      width: 8vh;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #eee;
      font-size: 22px;
      box-shadow: 1px 2px 2px #999;
    }
  }
}
</style>
<style lang="scss">
.crop-whole-cover{
    margin: auto;
    width: 45%;
    height: 87%;
}
.crop-component{
  .crop-title{
    font-size: 22px;
    color: #fff;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 9;
  }
  .crop-btns{
    bottom:5vh;
  }
}
.crop-component .crop-btns button{
  height: 50px;
  width: 50px;
  display: flex;
  align-content: center;
  justify-content: center;

}
.crop-component .crop-around:after {
  background: none !important;
  content: "旋转" !important;
  width: 30px !important;
  height: 20px !important;
  color: #fff !important;
}

.crop-component .crop-close:after {
  background: #f00 !important;
  content: "关闭" !important;
  width: 50px !important;
  height: 50px !important;
  color: #fff !important;
  border-radius: 50%;
  line-height: 50px;
}

.crop-component .crop-reset:after {
  background: none !important;
  content: "重置" !important;
  width: 30px !important;
  height: 20px !important;
  color: #fff !important;
}

.crop-component .crop-btn:after {
  background: #166aff !important;
  content: "确认" !important;
  width: 50px !important;
  height: 50px !important;
  color: #fff !important;
  border-radius: 50%;
  line-height: 50px;
}
</style>